#app {
  min-height: 100vh;
  // background: var(--color-background);
  // background: url('@/assets/skyblue.jpg') no-repeat center top;
  // background-image: url('@/assets/skyblue.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
}

// 通用 container
.container {
  width: 100%;
  position: relative;
  margin: 0 auto;
  padding: 0;

  &::after {
    content: '';
    display: block;
    clear: both;
  }
}

@media (min-width: 720px) {
  .container {
    padding: 0 20px 16px;
  }
}

@media (min-width: 1080px) {
  .container {
    width: 1080px;
  }
}

// card页面按钮样式
.ant-card.card_button_list {
  margin-bottom: 0.5rem;

  .ant-card-body {
    padding-right: 14px;
    padding-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    content-visibility: auto;

    .ant-btn {
      margin-right: 10px;
      margin-bottom: 10px;
      max-width: calc(100% - 10px);
      flex: 1;
      img:not(.hidden) ~ span {
        max-width: calc(100% - 20px);
      }
      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    &::before,
    &::after {
      display: none;
    }

    .icon {
      width: 16px;
      height: 16px;
      margin-right: 4px;
      vertical-align: super;
    }

    .seat {
      width: 0;
      height: 0;
      zoom: 0;
      margin: 0;
      padding: 0;
      visibility: hidden;
      overflow: hidden;
      border: none;
    }
  }
}

// 取消描述列表最后一行的内边距
.ant-descriptions {
  .ant-descriptions-item {
    padding-bottom: 10px;
  }

  // .ant-descriptions-item-label,
  // .ant-descriptions-item-content {
  //   color: var(--color-text);
  // }

  tr:last-child td {
    padding-bottom: 0;
  }
}

// a.ant-btn:not(.ant-btn-link),
// :where(.css-dev-only-do-not-override-kqecok).ant-btn-default {
//   color: var(--color-text);
//   background: var(--color-background);
// }

div.ant-card {
  // color: var(--color-text);
  // border-color: var(--color-border);
  // background: var(--color-background);

  // &:hover {
  //   border-color: var(--color-border-hover);

  //   .ant-card-head {
  //     border-color: var(--color-border-hover);
  //   }
  // }

  // .ant-card-head {
  //   color: var(--color-heading);
  //   border-color: var(--color-border);
  // }

  &.ant-card-hoverable {
    cursor: default;
  }
}

// number 箭头
.ant-input-number-handler-wrap {
  z-index: 1;
}

section.ant-layout {
  background: transparent;
}

@media (prefers-color-scheme: dark) {
  #app::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
  }

  // div.ant-collapse {
  //   color: var(--color-text);
  //   border-color: var(--color-border);
  //   background: var(--color-background-mute);

  //   .ant-collapse-item {
  //     border-color: var(--color-border);

  //     .ant-collapse-header {
  //       color: var(--color-text);
  //     }

  //     .ant-collapse-content {
  //       border-color: var(--color-border);
  //       background: var(--color-background);
  //     }
  //   }
  // }

  // .ant-form {
  //   .ant-form-item {
  //     .ant-form-item-label {
  //       label {
  //         color: var(--color-text);
  //       }
  //     }

  //     .ant-radio {
  //       &-wrapper {
  //         color: var(--color-heading);
  //       }

  //       &-inner {
  //         background: var(--color-background-mute);
  //       }
  //     }

  //     .ant-input {
  //       color: var(--color-heading);
  //       border-color: var(--color-border);
  //       background: var(--color-background-mute);
  //     }

  //     .ant-input-number {
  //       color: var(--color-heading);
  //       border-color: var(--color-border);
  //       background: var(--color-background-mute);

  //       &-handler {
  //         border-color: var(--color-border);

  //         span {
  //           color: var(--color-heading);
  //         }

  //         &:active {
  //           background: var(--color-background);
  //         }
  //       }

  //       &-handler-wrap {
  //         background: var(--color-background-mute);
  //       }
  //     }
  //   }
  // }
}
